<template>
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                <el-form-item label="票务类型：">
                    <el-select v-model="listQuery.userTicketType" placeholder="全部">
                        <el-option
                            v-for="item in listLei"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="搜索：">
                    <el-input v-model="listQuery.searchKey" class="input-width" placeholder="请输入用户昵称/真实姓名" clearable></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex;">
                <el-button
                    style="float:right"
                    type="primary"
                    @click="handleSearchList()"
                    size="small">
                    查询搜索
                </el-button>
                <el-button
                    style="float:right;margin-right: 15px"
                    @click="handleResetSearch()"
                    size="small">
                    重置
                </el-button>
                <!-- <el-button size="mini" class="btn-add" @click="createAdd()" >添加巡演关联</el-button> -->
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="adminTable"
                    :data="list"
                    style="width: 100%;"
                    v-loading="listLoading" border>
                <el-table-column label="用户ID" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.userId}}</template>
                </el-table-column>
                <el-table-column label="用户昵称" align="center">
                    <template slot-scope="scope">
                        <!-- {{scope.row.nikeName}} -->
                        <div v-html="hightLight(listQuery.searchKey, scope.row.nikeName)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="真实姓名" align="center">
                    <template slot-scope="scope">
                        <!-- {{scope.row.realName }} -->
                        <div v-html="hightLight(listQuery.searchKey, scope.row.realName)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="电话号码" width="160" align="center">
                    <template slot-scope="scope">（{{ scope.row.areaCode }}）{{scope.row.telephone}}</template>
                </el-table-column>
                <el-table-column label="电子邮箱" width="160" align="center">
                    <template slot-scope="scope">{{scope.row.email}}</template>
                </el-table-column>
                <el-table-column label="邀请ID" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.inviteCode}}</template>
                </el-table-column>
                <el-table-column label="结算货币" width="150" align="center">
                    <template slot-scope="scope">{{scope.row.currencyName}} ({{scope.row.currency}})</template>
                </el-table-column>
                <el-table-column label="票务类型" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.userTicketType === 'REAL' ? '真实票务' : '公司员工'}}</template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                    type="text"
                                    @click="handleUpdate(scope.$index, scope.row)">详情
                        </el-button>
                        <el-button size="mini"
                                    type="text"
                                    @click="handleCancel(scope.$index, scope.row)">撤销认证
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20]"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
            :title="'票务顾问详情'"
            :visible.sync="visible"
            width="65%">
            <el-form :model="detailInfo"
                    ref="thirdForm"
                    label-width="200px" size="small">
                <el-form-item label="用户昵称：">
                    <span>{{ detailInfo.nikeName }}</span>
                </el-form-item>
                <el-form-item label="真实姓名：">
                    <span>{{ detailInfo.realName }}</span>
                </el-form-item>
                <el-form-item label="电话号码：">
                    <span>（{{ detailInfo.areaCode }}）{{ detailInfo.telephone }}</span>
                </el-form-item>
                <el-form-item label="电子邮箱：">
                    <span>{{ detailInfo.email }}</span>
                </el-form-item>
                <el-form-item label="邀请ID：">
                    <span>{{ detailInfo.inviteCode }}</span>
                </el-form-item>
                <el-form-item label="注册时间：">
                    <span>{{ detailInfo.registerTime }}</span>
                </el-form-item>
                <el-form-item label="注册IP：">
                    <span>{{ detailInfo.registerIpAddress }}（{{detailInfo.registerIpRegion}}）</span>
                </el-form-item>
                <el-form-item label="申请时间：">
                    <span>{{ detailInfo.createTime }}</span>
                </el-form-item>
                <el-form-item label="通过时间：">
                    <span>{{ detailInfo.approvalTime }}</span>
                </el-form-item>
                <el-form-item label="审批人：">
                    <span>{{ detailInfo.approvalUserName }}</span>
                </el-form-item>
                <!-- <el-form-item label="撤销时间：">
                    <span>{{ detailInfo.revokeTime }}</span>
                </el-form-item>
                <el-form-item label="撤销操作人：">
                    <span>{{ detailInfo.revokeUserName }}</span>
                </el-form-item> -->
            </el-form>
            <el-table ref="bankTable"
                    :data="bank"
                    style="width: 100%;"
                     border>
                <el-table-column label="序号" width="100" align="center">
                    <template slot-scope="scope">{{scope.$index + 1}}</template>
                </el-table-column>
                <el-table-column label="收款账户所在地" align="center">
                    <template slot-scope="scope">{{scope.row.regionName}}</template>
                </el-table-column>
                <el-table-column label="收款银行名称" align="center">
                    <template slot-scope="scope">{{scope.row.bankName }}</template>
                </el-table-column>
                <el-table-column label="银行代码" width="160" align="center">
                    <template slot-scope="scope">{{scope.row.bankCode}}</template>
                </el-table-column>
                <el-table-column label="银行卡号" width="160" align="center">
                    <template slot-scope="scope">{{scope.row.bankAccount}}</template>
                </el-table-column>
                <el-table-column label="Swirf代码" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.swiftCode}}</template>
                </el-table-column>
                <el-table-column label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        {{scope.row.cardStatus === 'NORMAL' ? '正常' : '异常'}} |
                        {{scope.row.useStatus === 'Y' ? '收款中' : '未收款'}}
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 20px 0 10px 0;">
                <el-table ref="huoTable"
                    :data="listHuo"
                    style="width: 100%;"
                     border>
                    <el-table-column label="活动ID" width="100" align="center">
                        <template slot-scope="scope">{{scope.row.activityId}}</template>
                    </el-table-column>
                    <el-table-column label="活动分类" align="center">
                        <template slot-scope="scope">{{scope.row.categoryId === 1 ? '体育': scope.row.categoryId === 2 ? '演唱会': '音乐节'}}</template>
                    </el-table-column>
                    <el-table-column label="活动名称" align="center">
                        <template slot-scope="scope">{{scope.row.zhCnName }}</template>
                    </el-table-column>
                    <el-table-column label="活动地点" width="160" align="center">
                        <template slot-scope="scope">{{scope.row.address}}</template>
                    </el-table-column>
                    <el-table-column label="活动时间" width="160" align="center">
                        <template slot-scope="scope">{{scope.row.startTime | formatDateTime}} - {{scope.row.endTime | formatDateTime}}</template>
                    </el-table-column>
                    <el-table-column label="活动状态" width="100" align="center">
                        <template slot-scope="scope">{{showStatus(scope.row.status)}}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                        type="text"
                                        @click="handleHuoUpdate(scope.$index, scope.row)">详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-new">
                <el-pagination
                    background
                    @size-change="huoSizeChange"
                    @current-change="huoCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="huoQuery.pageNum"
                    :page-size="huoQuery.pageSize"
                    :page-sizes="[10,15,20]"
                    :total="totalHuo">
                </el-pagination>
            </div>
            <div style="display: flex;justify-content: center;margin: 10px;">
                <el-button type="primary" @click="handleVCancel()" size="small">撤销认证</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { approvalList, approvalInfo, approvalBank, approvalHandler, ticketSeller, fetchAllResourceList } from '@/api/app';
import {formatDate} from '@/utils/date';
export default {
    data() {
        return {
            listLoading: false,
            list: [],
            listQuery: {
                pageNum: null,
                pageSize: null,
                userTicketType: null,
                approveStatus: 'PASS',
                searchKey: null
            },
            total: 0,
            listLei: [
                {
                    name: '真实票务',
                    id: 'REAL'
                },
                {
                    name: '公司员工',
                    id: 'COMPANY'
                }
            ],
            visible: false,
            detailInfo: {
                approvalTime: null,
                approvalUserName: null,
                approveStatus: null,
                areaCode: null,
                createTime: null,
                currency: null,
                email: null,
                id: null,
                inviteCode: null,
                nikeName: null,
                realName: null,
                registerIpAddress: null,
                registerIpRegion: null,
                registerTime: null,
                revokeTime: null,
                revokeUserName: null,
                telephone: null,
                userId: null,
                userTicketType: null,
            },
            visibleC: false,
            bank: [],
            listHuo: [],
            totalHuo: 0,
            huoQuery: {
                pageNum: 1,
                pageSize: 10,
            },
            btnMenu: {
                edit: true,
                delete: true,
            },
        }
    },
    created() {
        const menu = JSON.parse(localStorage.getItem('listMenu'));
        const item = menu.filter(item => item.title === '已认证')[0];
        fetchAllResourceList({menuId: item.id }).then(res => {
            res.data.forEach(dom => {
                if (dom.component === '' && dom.name === '详情') {
                    this.btnMenu.edit = false;
                }
                if (dom.component === '' && dom.name === '撤销') {
                    this.btnMenu.delete = false;
                }
            });
        });
        this.getList();
    },
    filters: {
        formatDateTime(time) {
          if (time == null || time === '') {
            return '-';
          }
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }
    },
    methods: {
        hightLight (keyWord, suggtion) {
            // 使用 regexp 构造函数，因为这里要匹配的是一个变量
            let newSrt = null;
            const reg = new RegExp(keyWord, 'ig')
            if (keyWord && suggtion) {
                newSrt = String(suggtion).replace(reg, function (p) {
                    return '<span style="color: #409EFF">' + p + '</span>'
                })
            } else {
                newSrt = suggtion;
            }
            return newSrt
        },
        showStatus(type) {
          let word = null;
          switch(type) {
            case 0:
              word = '未开始';
              break;
            case 1:
              word = '进行中';
              break;
            case 2:
              word = '已结束';
              break;
            default: break;
          }
          return word;
        },
        getList() {
            approvalList(this.listQuery).then(res => {
                this.list = res.data.records;
                this.total = res.data.total;
            });
        },
        handleUpdate(index, row) {
            this.bank = [];
            approvalBank({userId: row.userId}).then(res => {
                this.bank = res.data;
            });
            this.huoGet();
            approvalInfo(row.id).then(res => {
                this.detailInfo = res.data;
                this.visible = true;
            });
            ticketSeller(row.userId, this.huoQuery).then(res => {
                this.listHuo = res.data.records;
                this.totalHuo = res.data.total;
            }) ;
        },
        handleCancel(index, row) {
            this.$confirm('确定取消该用户认证吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                approvalHandler({id: row.id, userTicketType: row.userTicketType, approveStatus: 'REVOKE'}).then(res => {
                    this.getList();
                    this.visible = false;
                })
            });
        },
        handleVCancel() {
            if (this.btnMenu.delete) {
                this.$confirm('确定取消该用户认证吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    approvalHandler({id: this.detailInfo.id, userTicketType: this.detailInfo.userTicketType, approveStatus: 'REVOKE'}).then(res => {
                        this.getList();
                        this.visible = false;
                    })
                });
            } else {
                this.$message({
                    type: 'error',
                    message: '无权限操作'
                });
            }
        },
        handleHuoUpdate(index, row) {
            if (this.btnMenu.edit) {

            } else {
                this.$message({
                    type: 'error',
                    message: '无权限操作'
                });
            }
            // this.$router.push({
            //     path: '/activity/activityList',
            //     query: {
            //         name: row.zhCnName,
            //         id: row.activityId
            //     }
            // })
        },
        handleResetSearch() {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = 10;
            this.listQuery.searchKey = null;
            this.listQuery.userTicketType = null;
            this.getList();
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        huoGet() {

        },
        huoSizeChange() {
            this.huoQuery.pageNum = 1;
            this.huoQuery.pageSize = val;
            this.huoGet();
        },
        huoCurrentChange() {
            this.huoQuery.pageNum = val;
            this.huoGet();
        },
        handleSizeChange(val) {
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val) {
          this.listQuery.pageNum = val;
          this.getList();
        },
    },
}
</script>

<style lang="scss">
.pagination-new {
    display: flex;
    justify-content: end;
}
</style>
